import "./moneyOrder.css";
import React from "react";
import { Timeline } from "antd";
const moneyOrder = () => {
  const imgOne = require("./one.png");
  const imgTwo = require("./two.png");
  const imgThree = require("./three.png");
  const imgUp = require("./up.png");
  const datas = [
    {
      label: "2015-09-01",
      children: (
        <div className="time-text">
          月日均 X,XXX.XX元
          <p style={{ margin: "0 20px" }}>|</p>
          <p style={{ display: "flex", alignItems: "center" }}>
            较上月
            <img src={imgUp} alt="up" />
            ￥8,058.21元
          </p>
          <p style={{ margin: "0 40px" }}>收益 X,XXX.XX元</p>
          <p>收益率X%</p>
        </div>
      ),
    },
    {
      label: "2015-09-01",
      children: (
        <div className="time-text">
          月日均 X,XXX.XX元
          <p style={{ margin: "0 20px" }}>|</p>
          <p style={{ display: "flex", alignItems: "center" }}>
            较上月
            <img src={imgUp} alt="up" />
            ￥8,058.21元
          </p>
          <p style={{ margin: "0 40px" }}>收益 X,XXX.XX元</p>
          <p>收益率X%</p>
        </div>
      ),
    },
    {
      label: "2015-09-01",
      children: (
        <div className="time-text">
          月日均 X,XXX.XX元
          <p style={{ margin: "0 20px" }}>|</p>
          <p style={{ display: "flex", alignItems: "center" }}>
            较上月
            <img src={imgUp} alt="up" />
            ￥8,058.21元
          </p>
          <p style={{ margin: "0 40px" }}>收益 X,XXX.XX元</p>
          <p>收益率X%</p>
        </div>
      ),
    },
    {
      label: "2015-09-01",
      children: (
        <div className="time-text">
          月日均 X,XXX.XX元
          <p style={{ margin: "0 20px" }}>|</p>
          <p style={{ display: "flex", alignItems: "center" }}>
            较上月
            <img src={imgUp} alt="up" />
            ￥8,058.21元
          </p>
          <p style={{ margin: "0 40px" }}>收益 X,XXX.XX元</p>
          <p>收益率X%</p>
        </div>
      ),
    },
    {
      label: "2015-09-01",
      children: (
        <div className="time-text">
          月日均 X,XXX.XX元
          <p style={{ margin: "0 20px" }}>|</p>
          <p style={{ display: "flex", alignItems: "center" }}>
            较上月
            <img src={imgUp} alt="up" />
            ￥8,058.21元
          </p>
          <p style={{ margin: "0 40px" }}>收益 X,XXX.XX元</p>
          <p>收益率X%</p>
        </div>
      ),
    },
    {
      label: "2015-09-01",
      children: (
        <div className="time-text">
          月日均 X,XXX.XX元
          <p style={{ margin: "0 20px" }}>|</p>
          <p style={{ display: "flex", alignItems: "center" }}>
            较上月
            <img src={imgUp} alt="up" />
            ￥8,058.21元
          </p>
          <p style={{ margin: "0 40px" }}>收益 X,XXX.XX元</p>
          <p>收益率X%</p>
        </div>
      ),
    },
    {
      label: "2015-09-01",
      children: (
        <div className="time-text">
          月日均 X,XXX.XX元
          <p style={{ margin: "0 20px" }}>|</p>
          <p style={{ display: "flex", alignItems: "center" }}>
            较上月
            <img src={imgUp} alt="up" />
            ￥8,058.21元
          </p>
          <p style={{ margin: "0 40px" }}>收益 X,XXX.XX元</p>
          <p>收益率X%</p>
        </div>
      ),
    },
  ];

  return (
    <div className="moneyOrder">
      <div className="title-info">
        <div className="left">
          今年以来，共收益 <span>X,XXX.XX元</span>，收益率 <span>X%</span>
          ，打败了 <span>X%</span> 的客户
        </div>
        <div className="right">数据日期：XXX-X-X</div>
      </div>
      <div className="top-list">
        <div className="top-list-title">
          <div className="blue-box"></div>
          产品收益排行榜
        </div>
        <div className="third-pro">
          <div className="pro-one">
            <img src={imgTwo} alt="two" />
            <div className="product">xxx产品</div>
            <div className="pay-off">收益</div>
            <div className="xxx">XXX</div>
          </div>
          <div className="pro-two">
            <img src={imgOne} alt="one" />
            <div className="product" style={{ fontSize: "20px" }}>
              XXX产品
            </div>
            <div className="pay-off" style={{ marginTop: "16px" }}>
              收益
            </div>
            <div className="xxx" style={{ fontSize: "22px" }}>
              XXX
            </div>
          </div>
          <div className="pro-three">
            <img src={imgThree} alt="three" />
            <div className="product">xxx产品</div>
            <div className="pay-off">收益</div>
            <div className="xxx">XXX</div>
          </div>
        </div>
      </div>
      <div className="time">
        <Timeline mode="left" items={datas} />
      </div>
    </div>
  );
};
export default moneyOrder;
